<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="105">
          <Alert show-icon style="padding-right: 8px;">手动上传的图片会覆盖数据源使用的图片路径</Alert>
          <UploadImageButton v-model="relativePath" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>
          <FormItem label="相对路径">
            <i-input size="small" v-model="relativePath" disabled>
              <Button slot="append" icon="md-close" @click="relativePath = ''"></Button>
            </i-input>
          </FormItem>

          <FormItemPanel title="动画">
            <FormItem label="类型">
              <Select :transfer="true" size="small" v-model="animation" clearable>
                <Option v-for="item in animations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="动画延时">
              <InputNumber size="small" :max="1000" :min="1" v-model="animationDelay"></InputNumber> 秒
            </FormItem>
          </FormItemPanel>

          <FormItem label="重复">
            <Select :transfer="true" size="small" v-model="backgroundRepeat">
              <Option v-for="item in $PnDict.backgroundRepeats" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="透明度">
            <Slider v-model="opacity" :max="1" :min="0" :step="0.1"></Slider>
          </FormItem>
          <FormItem label="图片尺寸">
            <Select :transfer="true" size="small" v-model="backgroundSize" placement="bottom-end">
              <Option v-for="item in backgroundSizes" :value="item.value" :label="item.label" :key="item.value">
                <span>{{ item.label }}</span>
                <p style="color: #808695;">{{item.remark}}</p>
              </Option>
            </Select>
          </FormItem>
          <FormItem label="圆角">
            <Alert :style="{padding: '6px'}">只有当图片尺寸为宽高100%时才有效果</Alert>
            <InputNumber size="small" :max="1000" :min="0" v-model="borderRadius"></InputNumber> px
          </FormItem>

          <!--<FormItem label="图片宽度">
            <Input size="small" v-model="width"/>
          </FormItem>
          <FormItem label="图片高度">
            <Input size="small" v-model="height"/>
          </FormItem>-->
          <!--<FormItemPanel title="自定义样式">
            <Alert :style="{padding: '10px'}">
              <p style="margin-bottom: 5px;">预设的一些样式：</p>
              <p>1、顺时针旋转动画：animation: rotate 10s linear infinite</p>
              <p>2、逆时针旋转动画：animation: rotate-reverse 10s linear infinite</p>
            </Alert>
            <CodeEditor v-model="customStyleCode" mode="css"></CodeEditor>
          </FormItemPanel>-->
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="ImageComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <Form :label-width="100">
            <FormItemPanel title="超链接跳转">
              <Alert style="padding-right: 10px !important;" type="info" show-icon>开启超链接跳转将会覆盖内置鼠标交互以及单击时运行脚本</Alert>
              <FormItem label="开启">
                <i-switch v-model="useLink">
                  <span slot="open"></span>
                  <span slot="close"></span>
                </i-switch>
              </FormItem>
              <FormItem label="链接地址">
                <Tooltip :max-width="200" placement="left" class="w-full"
                         content="如果需要平台内页面跳转，建议使用${BASE_PATH}读取项目根路径，后面接页面相对路径(path)，例如：${BASE_PATH}/1234567890">
                  <Input size="small" v-model="imageHref" placeholder=""/>
                </Tooltip>
              </FormItem>
              <FormItem label="打开方式">
                <Select :transfer="true" size="small" v-model="hrefTarget">
                  <Option v-for="item in $PnDict.targets" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </FormItemPanel>
          </Form>

          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <InteractionReceive></InteractionReceive>
          <MouseInteractionSender :mouseTypes="['click','mouseenter','mouseleave']"></MouseInteractionSender>
          <FormItemPanel title="鼠标单击时运行脚本">
            <CodeEditor v-model="clickHandleScript"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ImageCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        backgroundSizes: [
          {
            label: '宽高100%',
            value: '100% 100%',
            remark: '图像将强制撑满布局块'
          },
          {
            label: 'contain',
            value: 'contain',
            remark: '把图像扩展至最大尺寸，以使其宽度和高度完全适应布局块区域。'
          },
          {
            label: 'cover',
            value: 'cover',
            remark: '把图像扩展至足够大，以使图像完全覆盖背景区域，图像的某些部分也许无法显示在布局块中。'
          }
        ],
        animations: [
          {
            label: '线性顺时针无限旋转',
            value: 'rotate'
          },
          {
            label: '线性逆时针无限旋转',
            value: 'rotate-reverse'
          }
        ]
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({
        relativePath: 'component.compConfigData.relativePath',
        width: 'component.compConfigData.width',
        height: 'component.compConfigData.height',
        customStyleCode: 'component.compConfigData.customStyleCode',

        backgroundRepeat: 'component.compConfigData.backgroundRepeat',
        backgroundSize: 'component.compConfigData.backgroundSize',
        opacity: 'component.compConfigData.opacity',
        animation: 'component.compConfigData.animation',
        animationDelay: 'component.compConfigData.animationDelay',
        borderRadius: 'component.compConfigData.borderRadius',

        useLink: 'component.compConfigData.useLink',
        imageHref: 'component.compConfigData.imageHref',
        hrefTarget: 'component.compConfigData.hrefTarget',

        clickHandleScript: 'component.compConfigData.clickHandleScript'
      })
    }
  }
</script>

<style scoped>

</style>
